<template>
  <div class="head">
    <div class="logo">
      <img src="../assets/image/音乐.png" alt="" />
      sunSounds
      <!-- <el-input
        v-model="input"
        placeholder="请输入内容"
        size="medium"
      ></el-input> -->
    </div>

    <div>
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="pink"
      >
        <el-menu-item index="1">
          <router-link to="/discover">发现音乐</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link to="/recommended">推荐歌单</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link to="/newMusic">最新音乐</router-link>
          </el-menu-item>
        <el-menu-item index="4">
          <router-link to="/newMv">最新MV</router-link>
          </el-menu-item>
        <!--  <img src="../assets/image/QQ.png" alt="">
        <img src="../assets/image/微信.png" alt="">
        <img src="../assets/image/微博.png" alt=""> -->
      </el-menu>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style scoped>
.head {
  padding: 20px;
  padding-bottom: 0px;
  display: flex;
  justify-content: space-between;
  background-color: #545c64;
}
.logo {
  font-size: 32px;
  color: pink;
}
.logo image {
  vertical-align: text-bottom;
  background-color: none;
}
el-menu {
  display: flex;
}
a {
  text-decoration: none;
}
</style>